<template>
  <n-modal v-model:show="showModal" :on-update:show="updateModal" preset="dialog" title="Dialog">
    <template #header>
      <div>列设置</div>
    </template>
    <div>
      <n-form size="small" label-placement="top">
     <n-form-item label="排序" path="order">
        <n-radio-group v-model:value="model.order">
      <n-space>
        <n-radio label="无" value="语言1" />
        <n-radio label="升序" value="语言2" />
          <n-radio label="降序" value="语言3" />
      </n-space>
    </n-radio-group>
      </n-form-item>
        <n-form-item label="关键字" path="key">
        <n-input v-model:value="model.key" placeholder="请输入关键字" />
      </n-form-item>

      </n-form>
    </div>
    <template #action>
      <n-space>
        <n-button @click="handleCancel" :disabled="loading" :loading="loading">取消</n-button>
        <n-button @click="handleSearch" type="primary" :disabled="loading" :loading="loading">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
//删除 模块
const handleDeleteModel = (item: any) => {}
const emit = defineEmits(['update:modelValue', 'onSearch'])
const props = defineProps({
  orderingConfig: {
    type: Object,
    required: true
  },
  modelValue: {
    type: Boolean,
    required: true,
    default: false
  }
})
const model = computed(() => {
  return props.orderingConfig?props.orderingConfig:{}
})
const updateModal = (item: any) => {
  console.log(item)
  emit('update:modelValue', item)
}
const showModal = computed(() => {
  return props.modelValue
})
const loading = ref(false)
const handleCancel = ()=>{
  emit('update:modelValue', false)
}
const handleSearch = () => {
  loading.value = true
  console.log('model :>> ', model);
  setTimeout(() => {
    loading.value = false
    emit('update:modelValue', false)
    emit('onSearch', props.orderingConfig)
  }, 3000)
}
</script>

<style lang="scss" scoped>
@include go(Instrument) {
  height: calc(100vh - 40px);
}
</style>
